<template>
  <div class="params">
    <el-breadcrumb separator-calss="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert
        title="只允许修改第三级商品"
        type="warning"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-row>
        <span class="demonstration">选择商品分类：</span>
        <el-cascader
          v-model="selectValue"
          :options="options"
          :props="propsConfig"
          @change="handleChange"
          style="width: 260px"
        ></el-cascader>
      </el-row>
      <!-- 标签页 -->
      <el-tabs
        type="border-card"
        v-model="activeName"
        style="margin-top: 15px; min-height: 350px"
        @tab-click="handleClick"
      >
        <el-tab-pane label="动态参数" name="many">
          <el-button
            size="mini"
            type="primary"
            :disabled="btnDisabled"
            @click="addData()"
            >添加参数</el-button
          >
          <el-table :data="showTableData" style="width: 100%" border>
            <el-table-column type="expand" width="50">
              <template v-slot="scope">
                <el-tag
                  :key="tag"
                  v-for="tag in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="scope.row.inputVisible"
                  v-model="scope.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(scope.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>
            <el-table-column type="index" label="#" width="60">
            </el-table-column>
            <el-table-column prop="attr_name" label="参数名称">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template v-slot="scope">
                <el-button
                  type="primary"
                  class="el-icon-edit"
                  size="mini"
                  @click="editData(scope.row)"
                >
                  修改</el-button
                >

                <el-popconfirm
                  title="确定要删除该项吗？"
                  @confirm="deleteData(scope.row)"
                >
                  <el-button
                    type="danger"
                    size="mini"
                    class="el-icon-delete"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button size="mini" type="primary" :disabled="btnDisabled"
          @click='addData'
            >添加属性</el-button
          >
          <el-table :data="showTableData" style="width: 100%" border>
            <el-table-column type="expand" width="50">
              <template v-slot="scope">
                <el-tag
                  :key="index + tag"
                  v-for="(tag, index) in scope.row.attr_vals"
                  closable
                  @close="handleClose(scope)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="scope.row.inputVisible"
                  v-model="scope.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(scope.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>
            <el-table-column type="index" label="#" width="60">
            </el-table-column>
            <el-table-column prop="attr_name" label="参数名称">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template v-slot="scope">
                <el-button
                  type="primary"
                  class="el-icon-edit"
                  size="mini"
                  @click="editData(scope.row)"
                >
                  修改</el-button
                >

                <el-popconfirm
                  title="确定要删除该项吗？"
                  @confirm="deleteData(scope.row)"
                >
                  <el-button
                    type="danger"
                    size="mini"
                    class="el-icon-delete"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <el-dialog
        :title="dialogTitle"
        :visible.sync="editDialog"
        width="40%"
        :before-close="handleClose1"
      >
        <el-input v-model="editValue"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialog = false">取 消</el-button>
          <el-button type="primary" @click="editSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [], //级联数据
      selectValue: [], //级联被选择项
      propsConfig: {
        expandTrigger: 'hover',
        label: 'cat_name',
        value: 'cat_id',
      },
      activeName: 'many',
      showTableData: [], //table数据

      editValue: '', //编辑绑定参数
      editDialog: false,
      editId: '',
      editAttrId: '',

      dialogTitle: '添加参数',
    }
  },
  created() {
    this.getGoodsData()
  },
  computed: {
    btnDisabled() {
      if (this.selectValue.length < 1) {
        return true
      } else {
        return false
      }
    },
    tempId() {
      return this.selectValue.slice(-1) || null
    },
  },
  methods: {
    async getGoodsData() {
      const { meta, data } = await this.$axios.get('/api/categories')
      if (meta.status == 200) {
        this.options = data
      }
    },

    async handleChange() {
      //级联选择器
      if (this.selectValue.length < 3) {
        this.selectValue = []
        this.$message.warning('只允许添加第三级参数')
        this.showTableData = []
      } else {
        this.getData()
      }
    },
    async getData() {
      //获取需要显示的数据
      const { meta, data } = await this.$axios.get(
        `/api/categories/${this.tempId}/attributes`,
        { params: { sel: this.activeName } }
      )
      if (meta.status == 200) {
        data.forEach((item) => {
          item.inputVisible = false
          item.inputValue = ''
          if (item.attr_vals.trim()) {
            item.attr_vals = item.attr_vals.split(' ')
          } else {
            item.attr_vals = []
          }
        })
        this.showTableData = data

        console.log(data)
      } else {
        this.$message.error('获取数据失败')
      }
    },
    editData(val) {
      //编辑
      this.editDialog = true
      this.dialogTitle = '编辑参数'
      this.editValue = val.attr_name
      this.editAttrId = val.attr_id
      // console.log(val);
      this.editId = val.cat_id
    },
    addData() {
      this.editDialog = true
      this.dialogTitle = '添加参数'

      // this.editValue = val.attr_name
      // this.editAttrId = val.attr_id
      // console.log(val);
      // this.editId = val.cat_id
    },
    async editSubmit() {
      //编辑提交    ---  添加参数提交
      if (this.dialogTitle == '编辑参数') {
        const { meta } = await this.$axios.put(
          `/api/categories/${this.editId}/attributes/${this.editAttrId}`,
          { attr_name: this.editValue, attr_sel: this.activeName }
        )
        if (meta.status == 200) {
          this.getData()
          this.$message.success('修改成功')
         
        }
      }else if(this.dialogTitle=='添加参数'){
        const {meta,data}=await this.$axios.post(`/api/categories/${this.tempId}/attributes`,{attr_name:this.editValue,attr_sel:this.activeName})
        console.log(meta,data,this.editId);
        if(meta.status===201){
          this.$message.success('添加参数成功')
          this.getData()
        }else{
          this.$message.error('添加参数失败')
        }

      }
      this.editDialog=false
      this.editValue=''
    },

    async deleteData(val) {
      //删除
      console.log('删除了', val)
      const { meta } = await this.$axios.delete(
        `/api/categories/${val.cat_id}/attributes/${val.attr_id}`
      )
      if (meta.status == 200) {
        this.getData()
        this.$message.success('删除成功')
      }
    },

    handleClick() {
      console.log(this.selectValue, this.activeName)

      if (this.selectValue.length < 1) {
        return
      }
      this.getData()
    },
    // 编辑展开标签

    handleClose1(done) {
      //编辑dialog
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },

    handleClose(tag) {
      console.log(tag)
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput(row) {
      //文本框聚焦
      row.inputVisible = true
      this.$nextTick(() => {
        console.log(row)
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    async handleInputConfirm(row) {
      //编辑tag标签
      let inputValue = row.inputValue.trim()
      if (inputValue) {
        row.attr_vals.push(inputValue)
        const { meta } = await this.$axios.put(
          `/api/categories/${row.cat_id}/attributes/${row.attr_id}`,
          {
            attr_name: row.attr_name,
            attr_sel: this.activeName,
            attr_vals: row.attr_vals.join(' '),
          }
        )
        if (meta.status == 200) {
          this.$message.success('添加成功')
        } else {
          this.$message.error('添加失败')
        }
      }
      row.inputValue = ''
      row.inputVisible = false
      console.log(row)
    },
  },
}
</script>

<style lang="less" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
